import React from 'react';
import { Input, Button, Radio, Checkbox, Modal, Space } from 'antd';
import axios from '../../axios/axios'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';


export default class Preview extends React.Component {
    constructor(props) {
        super(props);
        // this.handleRadioChange = this.handleRadioChange.bind(this);
        // this.handleCheckboxChange = this.handleCheckboxChange.bind(this);

        // this.radioChange = this.radioChange.bind(this);
        // this.checkboxChange = this.checkboxChange.bind(this);
        // this.handleTextChange = this.handleTextChange.bind(this);
        // this.handleSubmitQuestionnaire = this.handleSubmitQuestionnaire.bind(this);
        this.state = {
            q_id: {},
            title: '',
            description: '',
            questions: [],
            titleEditable: false,
            numberVisible: true,
            state: -1,
            date: '',
        }
    }
    componentWillMount() {
        let _this = this;
        let value = _this.props.location.state;
        this.setState({
            q_id:value,
        })
        console.log(value);
        axios.post('/edit', {q_id:value})
            .then(res => {
                if (res.data.success === true) {
                    var json = JSON.parse(res.data.data)
                        _this.setState({
                            title: json.title,
                            questions: json.questions,
                            numberVisible: json.numberVisible,

                        })
                }
            })
    }

    getTitle() {
        return (
            <div className="editTitle" style={{ margin: '0 20px 20px 20px', padding: 20, textAlign: 'center' }} >
                <h2><strong>{this.state.title}</strong></h2>
            </div>
        );
    }

    getQuestions() {
        let questions = this.state.questions;
        const { TextArea } = Input;
        console.log(this.state);
        return questions.map((question, questionIndex, array) => {
            if (question.type === 'radio') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group  value={question.value} style={{ textAlign: 'left' }}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex + 1} style={{ fontSize: 16 }}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group  value={question.value} style={{ textAlign: 'left' }}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex + 1} style={{ fontSize: 16 }}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    );
                }

            }
            else if (question.type === 'checkbox') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>

                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} >{option.text}</Checkbox>
                                    )
                                })}
                            </Space>


                        </div>
                    );
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>

                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} >{option.text}</Checkbox>
                                    )
                                })}
                            </Space>


                        </div>
                    );
                }
            }

            else if (question.type === 'textarea') {


                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>

                                <TextArea rows={5} value={question.text}  />
                            </div>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>

                                <TextArea rows={5} value={question.text}  />
                            </div>

                        </div>
                    )
                }

            }


            else if (question.type === 'grade') {


                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group >

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex + 1} key={optionIndex}>{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group value={question.value}>

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex + 1} key={optionIndex}>{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>
                        </div>
                    )
                }
            }

            else {
                return null;
            }
        })
    }

    getFooter() {
        return (
            <div style={{ padding: 20, textAlign: 'center' }}>
                <Button type="primary" size="large" >提交问卷</Button>
            </div>
        );
    }

    render() {

            return (

                <div>
                <div>
                <Link to="/home">
                    <Button style={{marginTop:10,marginLeft:10}}>返回</Button>
                    </Link>
                </div>
                    {this.getTitle()}
                    <div style={{ marginBottom: 20, padding: 20, borderTop: '2px solid #ccc', borderBottom: '2px solid #ccc' }}>
                        {this.getQuestions()}
                    </div>
                    {this.getFooter()}
                </div>
            );
        


        }
    }
